<template>
  <el-menu class="left-bar-menu" theme="dark" default-active="$route.path" router>
    <div class="user_info">
      <div class="img_and_tip">
        <img v-vImg="current_user_img" alt="">
        <div class="tip">99+</div>
      </div>
      <h1>欢迎您：
        <span v-text="current_user.real_name"></span>
      </h1>
      <div class="postions">
        <div class="brand">{{current_user.brand_name}}</div>
        <div class="role">{{current_user.user_type | level}}</div>
      </div>
    </div>
    <el-menu-item :index="'/'">
      <i class="el-icon-setting"></i>
      新建订单
    </el-menu-item>
    <el-menu-item v-for="item in items" :key="item.router" :index="item.router" v-show="item.roles.indexOf(current_user.user_type) !== -1">
      <i :class="item.icon"></i>
      {{item.name}}
    </el-menu-item>
  </el-menu>
</template>

<script>
import '../../styles/layouts/leftBar.scss'
import { mapGetters } from 'vuex'

export default {
  data: () => ({
    items: [
      { icon: 'el-icon-menu', name: '订单', router: '/orders', roles: ['super','manager', 'finance', 'server', 'tech', 'business'] },
      { icon: 'el-icon-menu', name: '品牌商', router: '/brand/aduits', roles: ['super','manager', 'finance', 'server', 'tech', 'business'] },
      { icon: 'el-icon-menu', name: '服务商', router: '/server', roles: ['super','manager', 'finance', 'server', 'tech', 'business'] },
      { icon: 'el-icon-menu', name: '用户', router: '/users', roles: ['super', 'server', 'tech', 'business'] },
      { icon: 'el-icon-menu', name: '客服', router: '/service', roles: ['super', 'tech', 'business'] },
      { icon: 'el-icon-menu', name: '财务', router: '/finance', roles: ['super','manager', 'finance', 'tech', 'business'] }
    ]
  }),
  created() {
  },
  computed: {
    ...mapGetters([
      'current_user',
      'current_user_img'
    ])
  },
  methods: {

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  watch: {
  }
}
</script>

